<template>
  <view>
    <view class="container">
      <view :hover-stay-time="50" class="list-cell b-b m-t" hover-class="cell-hover" @click="inputShowModal('nickname')">
        <text class="cell-tit">
          修改昵称
        </text>
        <text class="cell-more yticon icon-you" />
      </view>
      <view :hover-stay-time="50" class="list-cell b-b" hover-class="cell-hover" @click="genderShowModal">
        <text class="cell-tit">
          修改性别
        </text>
        <text class="cell-more yticon icon-you" />
      </view>

      <neil-modal
        :show="inputShow"
        title="编辑"
        @close="cancel"
        @cancel="cancel"
        @confirm="confirm"
      >
        <input v-model="inputContent" style="margin:20upx" placeholder="请输入...">
      </neil-modal>

      <neil-modal
        :show="genderShow"
        title="选择性别"
        @close="cancel"
        @cancel="cancel"
        @confirm="confirmGender"
      >
        <view>
          <radio-group style="text-align:center" @change="genderRadioChange">
            <label v-for="(item, index) in genders" :key="item.value">
              <radio :value="item.value + ''" :checked="index === gender" style="margin:10upx" />{{ item.name }}
            </label>
          </radio-group>
        </view>
      </neil-modal>
    </view>
  </view>
</template>

<script>
import neilModal from '@/components/neil-modal/neil-modal.vue'
import {
  mapState
} from 'vuex'
export default {
  components: {
    neilModal
  },
  data() {
    return {
      inputShow: false,
      feild: undefined,
      inputContent: '',
      genderShow: false,
      gender: undefined,
      genders: [{ name: '保密', value: 0 }, { name: '男', value: 1 }, { name: '女', value: 2 }]
    }
  },
  computed: {
    ...mapState(['userInfo'])
  },
  methods: {
    cancel() {
      this.inputShow = false
      this.genderShow = false
    },
    inputShowModal(feild) {
      this.feild = feild
      this.inputShow = true
      this.inputContent = ''
    },
    genderShowModal() {
      this.genderShow = true
      this.gender = this.userInfo.gender
    },
    confirm() {
      const that = this
      if (!that.inputContent) {
        that.$api.msg('输入不能为空')
        return
      }
      const obj = {}
      obj[that.feild] = that.inputContent
      that.$api.request('user', 'syncUserInfo', obj).then(res => {
        that.userInfo[that.feild] = that.inputContent
        that.inputContent = ''
        that.$store.commit('login', that.userInfo)
      })
    },
    genderRadioChange(e) {
      this.gender = parseInt(e.detail.value)
    },
    confirmGender() {
      const that = this
      if (that.gender === undefined) {
        that.$api.msg('请选择性别')
        return
      }
      const obj = {
        gender: that.gender
      }
      that.$api.request('user', 'syncUserInfo', obj).then(res => {
        that.userInfo.gender = that.gender
      })
    }

  }
}
</script>

<style lang="scss">
	page{
		background: $page-color-base;
	}

	page{
		background: $page-color-base;
	}
	.list-cell{
		display:flex;
		align-items:baseline;
		padding: 20upx $page-row-spacing;
		line-height:60upx;
		position:relative;
		background: #fff;
		justify-content: center;
		&.log-out-btn{
			margin-top: 40upx;
			.cell-tit{
				color: $uni-color-primary;
				text-align: center;
				margin-right: 0;
			}
		}
		&.cell-hover{
			background:#fafafa;
		}
		&.b-b:after{
			left: 30upx;
		}
		&.m-t{
			margin-top: 16upx;
		}
		.cell-more{
			align-self: baseline;
			font-size:$font-lg;
			color:$font-color-light;
			margin-left:10upx;
		}
		.cell-tit{
			flex: 1;
			font-size: $font-base + 2upx;
			color: $font-color-dark;
			margin-right:10upx;
		}
		.cell-tip{
			font-size: $font-base;
			color: $font-color-light;
		}
		switch{
			transform: translateX(16upx) scale(.84);
		}
	}

</style>
